<template>
    <div>
        <header class="nearby-header">
			<div class="left-info">
				<i class="add-icon"></i>
				<span class="add-name">北京市朝阳区远洋商务</span>
				<span class="add-r"> </span>
			</div>
			<div class="right-info">
				<input type="text" class="text-input" placeholder="找附近的吃喝玩乐">
				<i class="searth-icon"></i>
			</div>
		</header>
		<div class="nearby-content">
			<ul class="nav-ul daohang">
				<li class="list-li red" @click="bian(1)"> 享美食<i class="icon ds"></i></li>
				<li class="list-li" @click="bian(2)">惠生活<i class="icon"></i></li>
				<li class="list-li" @click="bian(3)">爱玩乐<i class="icon"></i></li>
				<li class="list-li" @click="bian(4)">住酒店<i class="icon"></i></li>
				<li class="list-li" @click="bian(5)">全部<i class="icon"></i></li>
			</ul>
			<div style="padding:50px 0; color: #999;">
				敬请期待
			</div>
			<div class="receive" v-show="false">
				<p class="title" >已经领取的券可以在这里查看{{msg}}</p>
				<img src="../../../assets/personal/images/receive-img.png" alt="">
			</div>

			<div >		<!--:v-for="item in msg" data-price="item.price" :data-id="item.id"-->
			<div class="tab-content-in new_style" v-show="false">
					<div class="same-box new_style_1">
						<div class="left-info"><img src="../../../assets/personal/images/wdm-pic.png" alt=""></div>
						<div class="center-info">
							<p class="title">味多美面包坊{{msg}}</p>
							<div class="star-group">
								<i class="icon"></i><i class="icon"></i><i class="icon"></i><i class="icon"></i><i class="icon"></i>
							</div>
							<div class="card-info">
								<strong>8</strong>
								<span class="text">元代金券</span>
								<span class="text1">满35元可用</span>
							</div>
							<p class="bottom-text">味多美（慈云寺店）</p>
						</div>
						<div class="right-info">
							<button class="btn">立即领取</button>
							<div class="add-info">
								<i class="icon"></i>
								<span>200m</span>
							</div>
						</div>
					</div>
				</div>
            </div>
	   </div>
    </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/nearby.css";
  .new_style,.new_style_1{
	  width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .new_style_1{
  width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e5e5e5
  }
  .red{
	  color: red!important;
  }
  .list-li:link{
	  color: red;
  }
  .ds{
	  display: block!important;
  }
</style>
<script>
export default {
	data () {
		return {
			msg:null,
		}
	},
	 created:function(){
    },
	methods: {
		bian:(function(id){
			console.log(id)
			this.msg=id
			//collection_type拼接
			 this.$http.get("/src/assets/data/list.json").then((response) => {
            console.log(response)
        }).catch(function(err){
            console.log(err)
		});
	  }),
	},
	mounted:function(){
		$(".list-li").click(function(){
			$(this).addClass("red").siblings().removeClass("red");
			$(this).children("i").addClass("ds").parent().siblings().children("i").removeClass("ds");
		})
	}
}
</script>
